<template>
	<view class="page">
		<view class="head">
			<view class="left">
				<image src="https://foruda.gitee.com/avatar/1668153151629878902/11982810_h100511989_1668153149.png!avatar200" mode="widthFix"></image>
				<text>王小二虎皮凤爪</text>
			</view>
			<view class="right">
				总补贴：<text>200</text>元
			</view>
		</view>
		<view class="list">
			<view class="top">
				<image src="/static/restaurant/user/list.png" mode="widthFix"></image>
				<text>补贴记录</text>
			</view>
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<text>2024/07/09 12:00</text>
				
				<view class="right">
					<text>餐补</text>
					<text class="money">￥20</text>
				</view>
			</view>
			<s-empty v-if="dataList.length == 0"></s-empty>
		</view>
		
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [1,2,3,4,5,1,1,1,1,1,1,1,1,1],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			};
		},
		onLoad(option) {
			// this.loadData();
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData(mark_type) {
				let res = await this.$api.test({noncestr: Date.now()});
				uni.stopPullDownRefresh();
				this.dataList = this.reload ? res.data : this.dataList.concat(res.data); //数据 追加
				this.total = res.total; //数据量
				this.current_page = res.current_page; //当前页码
				this.last_page = res.last_page; //总页码
				this.status = res.total == 0 ? 'noMore' : 'more';
			}
		}
	};
</script>
<style lang="less">
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
.page {
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 38rpx 30rpx;
		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			image {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			text {
				color: #333;
				font-size: 36rpx;
			}
		}
		.right {
			color: #FA802A;
			font-size: 28rpx;
			text {
				font-size: 48rpx;
				font-weight: 500;
			}
		}
	}
	.list {
		padding: 0 30rpx;
		.top {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
			text {
				display: inline-block;
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
		.item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 44rpx;
			margin: 30rpx 0;
			> text {
				position: relative;
				color: #333333;
				font-size: 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 38rpx;
				&::after {
					content: "";
					display: inline-block;
					position: absolute;
					left: 0;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50rpx;
					background-color: #333;
				}
			}
			.right {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				text {
					&:nth-child(1) {
						color: #333333;
						font-size: 32rpx;
					}
					&:nth-child(2) {
						color: #FA802A;
						margin-left: 16rpx;
						position: relative;
						display: flex;
						justify-content: flex-start;
						font-size: 38rpx;
						&::after {
							display: inline-block;
							content: "元";
							color: #FA802A;
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
}
</style>
